<template>
  <div class="demo-pagination-block">
    <el-pagination
      :current-page="page"
      :total="total"
      :page-size="limit"
      :page-sizes="[5, 10, 20, 30]"
      style="padding: 20px 0"
      layout="prev, pager, next, jumper, ->, sizes, total"
      @current-change="changePage"
      @size-change="getRoles"
    ></el-pagination>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "Pagination",
});
</script>
<script lang="ts" setup>
//1.接收父组件的props传值
defineProps<{ page: number; total: number; limit: number }>();
//2.接收父组件的自定义事件
const emit = defineEmits(['changePage'])
const changePage = () => {
  emit('changePage')
}
const getRoles = () => {
  console.log("当前页改变了");
};
</script>

<style lang="less" scoped></style>
